<template>
  <div
    :class="['choose-wrap', disabled ? 'disabled' : '']"
    @click="showWrapper"
    v-document-click="documentClick"
     v-if="list"
  >
    <div class="choose">
      <span>{{ value }}</span>
      <i class="el-icon-caret-bottom"></i>
      <div :class="{ 'mt-content': true, active: showWrapperActive }">
        <h2>{{ title }}</h2>
        <div :class="['wrapper', className]">
          <div class="col" v-for="(listData, index) in renderList" :key="index">
            <span
              :class="{ 'mt-item': true, active: item.provinceName == value }"
              v-for="(item, index) in listData"
              :key="index"
              @click="changeValue(item)"
              >{{ item.provinceName }}{{item.name}}</span
            >
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-for="(item,index) in list" :key="index">
      {{item.provinceName}}
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ['list', 'title', 'value', 'showWrapperActive', 'disabled', 'className'],
  computed: {
    renderList() {
      const col = Math.ceil(this.list.length / 12);
      const resultList = [];
      for (let i = 0; i < col; i += 1) {
        const data = this.list.slice(i * 12, i * 12 + 12);
        resultList.push(data);
      }
      return resultList;
    },
  },
  created() {},
  methods: {
    showWrapper(e) {
      e.stopPropagation();
      // this.showWrapperActive = true;
      if (!this.disabled) {
        this.$emit('change_active', true);
      }
    },
    documentClick() {
      this.$emit('change_active', false);
    },
    changeValue(item) {
      this.$emit('change', item);
    },
  },
};
</script>
<style lang="scss">
@import '@/assets/css/changecity/select.scss';
</style>
